<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    div {
      display: block;
      unicode-bidi: isolate;
    }

    .left {
      width: 580px;
      padding: 30px 50px;
    }

    .left .pictrue {
      width: 560px;
      height: 400px;
      display: flex;
      position: relative;
    }

    .left .pictrue .middle {
      width: 400px;
      height: 400px;
      position: relative;
    }

    .left .pictrue .middle img {
      width: 100%;
      height: 100%;
    }

    img {
      max-width: 100%;
      max-height: 100%;
      vertical-align: middle;
    }

    img {
      border-style: none;
    }

    user agent stylesheet img {
      overflow-clip-margin: content-box;
      overflow: clip;
    }

    .left .pictrue .middle .layer {
      display: none;
      width: 200px;
      height: 200px;
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      left: 0;
      top: 0;
      cursor: move;
    }

    .left .pictrue .small {
      width: 80px;
      height: 400px;
    }

    ul {
      list-style: none;
    }

    ul,
    h1,
    h3,
    h4,
    p,
    dl,
    dd {
      padding: 0;
      margin: 0;
    }

    .left .pictrue .small ul li.active,
    .left .pictrue .small ul li:hover {
      border-color: #27BA9B;
    }

    .left .pictrue .small ul li {
      width: 68px;
      height: 68px;
      margin-bottom: 15px;
      margin-left: 12px;
      border: 2px solid transparent;
    }

    user agent stylesheet li {
      display: list-item;
      text-align: -webkit-match-parent;
      unicode-bidi: isolate;
    }

    user agent stylesheet img {
      overflow-clip-margin: content-box;
      overflow: clip;
    }

    .left .pictrue .large {
      width: 400px;
      height: 400px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      position: absolute;
      left: 412px;
      top: 0;
      z-index: 999;
      background-color: #fff;
      display: none;
      background-image: url(./pic/1.jpg);
      background-size: 800px 800px;
    }

    .r {
      transform: translate(80px, -415px);
    }
  </style>
</head>

<body>
  <div class="left">
    <div class="pictrue">
      <div class="middle">
        <img src="./pic/1.jpg" alt="">
        <div class="layer"></div>
      </div>
      <div class="small">
        <ul class="l">
          <li class="active"><img src="./pic/1.jpg" alt=""></li>
          <li><img src="./pic/2.jpg" alt=""></li>
          <li><img src="./pic/3.jpg" alt=""></li>
          <li><img src="./pic/4.jpg" alt=""></li>
          <li><img src="./pic/5.jpg" alt=""></li>
          <li class="r"><img src="./pic/6.jpg" alt=""></li>
          <li class="r"><img src="./pic/7.jpg" alt=""></li>
          <li class="r"><img src="./pic/8.jpg" alt=""></li>
          <li class="r"><img src="./pic/9.jpg" alt=""></li>
          <li class="r"><img src="./pic/10.jpg" alt=""></li>
        </ul>
      </div>
      <div class="large"></div>
    </div>
  </div>
  <script>
    const small = document.querySelector('.small')
    const middle = document.querySelector('.middle')
    const large = document.querySelector('.large')
    const layer = document.querySelector('.layer')
    small.addEventListener('mouseover', function (e) {
      if (e.target.tagName === 'IMG') {
        this.querySelector('.active').classList.remove('active')
        e.target.parentNode.classList.add('active')
        middle.querySelector('img').src = e.target.src
        large.style.backgroundImage = `url(${e.target.src})`
      }
    })
    let timeId = null
    function show() {
      clearInterval(timeId)
      large.style.display = 'block'
    }
    function hide() {
      timeId = setInterval(function () {
        large.style.display = 'none'
      }, 300)
    }
    middle.addEventListener('mouseenter', show)
    middle.addEventListener('mouseleave', hide)
    large.addEventListener('mouseenter', show)
    large.addEventListener('mouseleave', hide)
    middle.addEventListener('mouseenter', function () {
      layer.style.display = 'block'
    })
    middle.addEventListener('mouseleave', function () {
      layer.style.display = 'none'
    })
    middle.addEventListener('mousemove', function (e) {
      let x = e.pageX - middle.getBoundingClientRect().left
      let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
      if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
        let mx = 0, my = 0
        if (x < 100) mx = 0
        if (x >= 100 && x <= 300) mx = x - 100
        if (x > 300) mx = 200
        if (y < 100) my = 0
        if (y >= 100 && y <= 300) my = y - 100
        if (y > 300) my = 200
        layer.style.left = mx + 'px'
        layer.style.top = my + 'px'
        large.style.backgroundPositionX = -2 * mx + 'px'
        large.style.backgroundPositionY = -2 * my + 'px'
      }
    })
  </script>
</body>

</html>